<template>
  <el-drawer
      v-model="isShow"
      size="100%"
      class="flow-dispose-panel"
      :with-header="false"
  >
    <div class="w-full h-full flex flex-col">
       <div class=" flex header  p-2.5">
          <div class="flex">
            <BaseIcon  class="mr-1.5" icon="icons:clarity:form-line" :size="30"></BaseIcon>
            <span class="text-base text-gray-600">任务处理</span>
          </div>
          <div class="flex-1 flex flex-row-reverse">
            <el-space class="base-space" wrap >
              <el-button type="primary">退回</el-button>
              <el-button @click="pass('pass')" type="primary">通过</el-button>
              <el-button type="danger">驳回</el-button>
              <el-button @click="close" >关闭</el-button>
            </el-space>
          </div>
       </div>
       <div class="flex flex-1">
         <div class="flex-1 ">
           <el-tabs type="border-card">
             <el-tab-pane label="业务表单">
               <Component
                :is="componentValue"
                ref="componentValueRef"
               >
               </Component>
             </el-tab-pane>
             <el-tab-pane label="流程图">Config</el-tab-pane>
           </el-tabs>
         </div>
         <div class="w-96">
           <el-tabs type="border-card">
             <el-tab-pane label="当前审批">
               <div class="w-full flex flex-col">
                 <div class="flex">
                   <el-descriptions class="w-full" :column="1" direction="vertical" >
                     <el-descriptions-item label-class-name="!font-bold" label="任务名称">{{task.name}}</el-descriptions-item>
                     <el-descriptions-item label-class-name="!font-bold" label="任务节点">{{task.taskName}}</el-descriptions-item>
                     <el-descriptions-item label-class-name="!font-bold" label="审批意见"> <el-input
                         v-model="dataForm.comment"
                         :rows="7"
                         type="textarea"
                         placeholder="请输入审批意见"
                     /></el-descriptions-item>
                   </el-descriptions>
                 </div>
               </div>
             </el-tab-pane>
             <el-tab-pane label="审批记录">Config</el-tab-pane>
           </el-tabs>
         </div>
       </div>
    </div>
    <ApproverDialog ref="approverDialogRef"></ApproverDialog>
  </el-drawer>
</template>

<script setup lang="ts">
import {nextTick, ref, shallowRef} from "vue";
import {FlowInstanceModel, FlowNodeModel, NextTaskModel} from "/@/api/flow/model/FlowBaseModel";
import {componentContainer} from "/@/views/flow/component/ts/RegisteredComponent";
import {getNextTaskNode} from "/@/api/flow/BaseFlowApi";
import {ElMessage} from "element-plus";
import  ApproverDialog from './ApproverDialog.vue'
const approverDialogRef = ref()
const dataForm = ref({
  taskId: '',
  variables: {},
  comment: '',
  processInstanceId: '',
  approveType: '',
  nodes: [] as FlowNodeModel[]
})
const nodes = ref<FlowNodeModel[]>()
const task = ref<FlowInstanceModel>({
  id: '',
  taskId: '',
  instanceId: '',
  executionId: '',
  definitionId: '',
  taskName: '',
  taskDefKey: '',
  businessId: '',
  businessSign: '',
  name: '',
  orgId: '',
  initiator: '',
  comId: '',
  createTime: ''
})
const componentValue = shallowRef()
const approverFunction = shallowRef()
const componentValueRef = ref()
const isShow = ref(false)
const init = (taskInstance: FlowInstanceModel) => {
  isShow.value = true;
  task.value = taskInstance
  dataForm.value.taskId = task.value.taskId
  dataForm.value.processInstanceId = task.value.instanceId
  let obj = componentContainer.get(taskInstance.businessSign);
  approverFunction.value = obj.fun
  componentValue.value = obj.component
  nextTick(async ()=>{
    await componentValueRef.value.init(taskInstance)
  })
}
const pass = async (approveType: string) => {
  let res = await componentValueRef.value.getNextTask() as NextTaskModel;
  dataForm.value.approveType = approveType
  if(res.nodes && res.nodes.length == 1){
    if(res.nodes[0].isEnd){
      dataForm.value.nodes = res.nodes
      dataForm.value.variables = res.variables
      await approverFunction.value.call(null,dataForm.value)
      return;
    }
  }
  approverDialogRef.value.init(res,async (task)=>{
      res = task
      dataForm.value.nodes = res.nodes

      dataForm.value.variables = res.variables
      await approverFunction.value.call(null,dataForm.value)
  })
  nodes.value = res.nodes
}
const close = () => {
  isShow.value = false
}
defineExpose({init})
</script>

<style  lang="scss">
.flow-dispose-panel{
  .el-drawer__body{
    padding: 0px;
  }
  .header{
    svg{
      color: var(--el-color-primary) !important;
    }
  }
  .el-tabs{
    height: 100%;
    .el-tabs__content{
      height: calc(100% - 40px);
    }
  }
}
</style>